<template lang="html">
  <div class="page">
    <section class="nav hidden-xs">
      <header class="hidden-xs col-sm-12 col-md-12 col-lg-12 logo-pc">
        <img src="../../static/images/logo-pc.png" alt="人人交易网">
        <span id="object" class="stretchRight" style="display:inline-block;line-height:4rem;color:rgb(133, 133, 133);text-align:left;padding-left:1rem;">模拟交易换真钱</span>
        <span id="nav-pc" class="nav-pc" style="display:inline-block;line-height:4rem;color:rgb(133, 133, 133);text-align:right;"><span><router-link to="/">首页&nbsp;&nbsp;&nbsp;</router-link></span><span><router-link to="/rank" style="color:#ed1d24">盘手榜</router-link></span></span>
        <!-- <span id="nav-pc" class="nav-pc" style="display:inline-block;line-height:4rem;color:rgb(133, 133, 133);text-align:right;padding-right:1rem;">排行榜</span> -->
      </header>
      <header class="hidden-xs h5-logo">
        <img src="../../static/images/logo_h5.png" alt="人人交易网">
        <br><br>
        <p id="object" class="pullDown" style="color:rgb(133, 133, 133);">模拟交易换真钱</p>
      </header>
    </section>
    <br>
    <!-- pc -->
    <section style="margin: 0 10rem;" class="hidden-xs">
      <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="ranks">
          <p class="ranks-title">连续达标 (<span style="color:rgb(237, 29, 36);">前20名</span>)</p>
          <p style="color:#999">查看更多排行请下载APP</p>
          <!-- <p>{{this.rankListA.datas[0].n}}</p> -->
          <div v-for="rankA of this.rankListA.datas" class="rankA">
            <span class="r">{{rankA.r}}</span>
            <!-- <span><img v-bind:src="http://116.62.67.174:10009/stock/httpServiceImpl/image/rankA.a" alt=""></span> -->
            <img :src="'http://116.62.67.174:10009/stock/httpServiceImpl/image/'+rankA.a" alt="">
            <span class="flex">{{rankA.n}}</span>
            <span class="flex">运行天数:<span style="color:rgb(237, 29, 36);">{{rankA.d}}</span>天</span>
            <span class="flex">连续达标月:<span style="color:rgb(237, 29, 36);">{{rankA.m}}</span></span>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <div class="ranks">
          <p class="ranks-title">管理规模 (<span style="color:rgb(237, 29, 36);">前20名</span>)</p>
          <p style="color:#999">查看更多排行请下载APP</p>
          <div v-for="rankA of this.rankListB.datas" class="rankA">
            <span class="r">{{rankA.r}}</span>
            <img :src="'http://116.62.67.174:10009/stock/httpServiceImpl/image/'+rankA.a" alt="">
            <span class="flex">{{rankA.n}}</span>
            <span class="flex">收益率:<span style="color:rgb(237, 29, 36);">{{rankA.d}}%</span></span>
            <span class="flex">总资产:<span style="color:rgb(237, 29, 36);">{{rankA.t}}</span></span>
          </div>
        </div>
      </div>
    </div>
    </section>
    <!-- 移动端 -->
    <section style="margin: 0 2rem;" class="visible-xs">
      <!-- <div class="swiper-container" style="height:5rem;line-height:5rem;">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="rank of rankMenu">{{rank}}</div>
        </div>
        <div class="swiper-scrollbar"></div>
        <div class="swiper-button-prev swiper-button-black"></div>
        <div class="swiper-button-next swiper-button-black"></div>
      </div> -->

      <div class="scroll-x">
        <ul>
          <li v-for="rank of rankMenu" v-bind:class="{active: rank === rankA}" v-on:click="rankChoose(rank)">{{rank}}</li>
        </ul>
      </div>

       <div v-if="rankA === '连续达标'" class="col-xs-12 col-sm-6 col-md-6 col-lg-6" style="margin-bottom: 8rem;">
        <div class="ranks">
          <!--<p class="ranks-title">连续达标 (<span style="color:rgb(237, 29, 36);">前20名</span>)</p>-->
          <p style="color:#999">查看更多排行请下载APP</p>
          <div v-for="rankA of this.rankListA.datas" class="rankB">
            <span class="r">{{rankA.r}}</span>
            <img :src="'http://116.62.67.174:10009/stock/httpServiceImpl/image/'+rankA.a" alt="">
            <span class="flex">
              <p style="line-height:1.3rem;">{{rankA.n}}</p>
              <p class="flex">运行天数:
              <span>
                <span style="color:rgb(237, 29, 36);">{{rankA.d}}</span>
                <span class="flex">连续达标月:<span style="color:rgb(237, 29, 36);">{{rankA.m}}</span></span>
              </span>
              </p>
            </span>
          </div>
        </div>
      </div>

      <!-- <div style="height:1rem;background-color:red;"></div> -->

<!--      <div style="height:48rem;" v-if="rankA === '连续达标'" class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <scroller :on-infinite="infiniteAA"  :on-refresh = "refreshAA" style="position:relative">
          <div class="ranks">
            <p style="color:#999">查看更多排行请下载APP</p>
            <div v-for="rank of this.rankListL" class="rankB">
              <span class="r">{{rank.r}}</span>
              <img :src="'http://116.62.67.174:10009/stock/httpServiceImpl/image/'+rank.a" alt="">
              <span class="flex">
                <p style="line-height:1.3rem;">{{rank.n}}</p>
                <p class="flex">运行天数:
                <span>
                  <span style="color:rgb(237, 29, 36);">{{rank.d}}</span>
                  <span class="flex">连续达标月:<span style="color:rgb(237, 29, 36);">{{rank.m}}</span></span>
                </span>
                </p>
              </span>
            </div>
          </div>
        </scroller>
      </div>-->

      <div style="height:48rem;" v-if="rankA === '管理规模'" class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
        <scroller :on-infinite="infinite"  :on-refresh = "refresh" style="position:relative">
          <div class="ranks">
            <!-- <p class="ranks-title">管理规模 (<span style="color:rgb(237, 29, 36);">前20名</span>)</p> -->
            <p style="color:#999">查看更多排行请下载APP</p>
            <div v-for="rank of this.rankList" class="rankB">
              <span class="r">{{rank.r}}</span>
              <img :src="'http://116.62.67.174:10009/stock/httpServiceImpl/image/'+rank.a" alt="">
              <span class="flex">
              <p style="line-height:1.3rem;">{{rank.n}}</p>
                <p class="flex">收益率:
                  <span>
                    <span style="color:rgb(237, 29, 36);">{{rank.d}}%</span>
                    <span class="flex">总资产:<span style="color:rgb(237, 29, 36);">{{rank.t}}</span></span>
                  </span>
                </p>
              </span>
            </div>
          </div>
        </scroller>
      </div>

    </section>
  </div>
</template>

<script>
// import Swiper from 'swiper';
// import 'swiper/dist/css/swiper.min.css';
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

import {
  postRanksA,
  postRanksB
} from '../api/api';

export default {
  data() {
    let rankListA = [];
    let rankListB = [];
    let rankList = [];
    let rankListL = [];
    let postDataA =
      {
        'header':
        {
          'action': 'S048',
          'code': '0',
          'devicetype': '1',
          'msgtype': 0,
          'page': {
            'index': 1,
            'size': 10
          },
          'sendingtime': '2016-09-26 14:46:06.090',
          'version': '1.0.01'
        },
        'type': '1'
      }
    let postDataB =
      {
        'header':
        {
          'action': 'S048',
          'code': '0',
          'devicetype': '1',
          'msgtype': 0,
          'page': {
            'index': 1,
            'size': 10
          },
          'sendingtime': '2016-09-26 14:46:06.090',
          'version': '1.0.01'
        },
        'type': '2'
      }
    return {
      offset: 1,
      offsetL: 1,
      postDataA: postDataA,
      postDataB: postDataB,
      rankListA: rankListA,
      rankListB: rankListB,
      rankList: rankList,
      rankA: '连续达标',
      rankMenu: [
        '连续达标',
        // '3333',
        '管理规模'
        // '5555',
        // '6666'
      ]
    }
  },
  created() {
    let postDataA =
      {
        'header':
        {
          'action': 'S048',
          'code': '0',
          'devicetype': '1',
          'msgtype': 0,
          'page': {
            'index': 1,
            'size': 20
          },
          'sendingtime': '2016-09-26 14:46:06.090',
          'version': '1.0.01'
        },
        'type': '1'
      }
    let postDataB =
      {
        'header':
        {
          'action': 'S048',
          'code': '0',
          'devicetype': '1',
          'msgtype': 0,
          'page': {
            'index': 1,
            'size': 20
          },
          'sendingtime': '2016-09-26 14:46:06.090',
          'version': '1.0.01'
        },
        'type': '2'
      }
    postRanksA(postDataA)
    .then((response) => {
      // console.log('1111', response.data)
      this.rankListA = response.data
    })
    postRanksA(postDataB)
    .then((response) => {
      // console.log('2222', response.data)
      this.rankListB = response.data
    })
    postRanksB(postDataA)
    .then((response) => {
      // console.log('aaaa', response.data.datas)
      this.rankListL = response.data.datas
    })
    postRanksB(postDataB)
    .then((response) => {
      // console.log('bbbb', response.data.datas)
      this.rankList = response.data.datas
    })
  },
  mounted() {
    // let mySwiper = new Swiper('.swiper-container',
    //   {
    //     navigation: {
    //       nextEl: '.swiper-button-next',
    //       prevEl: '.swiper-button-prev',
    //       hideOnClick: false
    //     },
    //     scrollbar: {
    //       el: '.swiper-scrollbar'
    //     },
    //     autoplay: true // 可选选项，自动滑动
    //     slideToClickedSlide: true,
    //     slidesPerView: 3,
    //     on: {
    //       slideNextTransitionStart: function() {
    //         alert('往前' + this.activeIndex);
    //       },
    //       tap: function(event) {
    //         alert(this.activeIndex)
    //       }
    //       transitionEnd: function() {
    //         alert(this.activeIndex)
    //       }
    //     }
    //   }
    //   )
  },
  methods: {
    // 管理刷新
    infinite(done) {
      console.log('up');
      // setTimeout(() => {
      // }, 1500)
      // this.offset = this.offset + 1
      // console.log('this.offset', this.offset);

      if (this.offset < 200) {
        this.offset++
        console.log('infinite', this.offset);
        postRanksB(this.postDataB, this.offset)
        .then((response) => {
          this.rankList = this.rankList.concat(response.data.datas)
          console.log('rankList', this.rankList);
          done()
        })
      } else {
        return
      }
    },
    refresh(done) {
      console.log('down');
      this.offset = 1
      postRanksB(this.postDataB, this.offset)
      .then((response) => {
        done()
        // console.log('data', response.data)
        this.rankListB = response.data
      })
    },
     // 连续刷新
    infiniteAA(done) {
      console.log('up');

      if (this.offsetL < 200) {
        this.offsetL++
        console.log('infinite', this.offsetL);
        postRanksB(this.postDataA, this.offsetL)
        // .then((response) => {
        //   this.rankListL = this.rankList.concat(response.data.datas)
        //   console.log('rankList', this.rankList);
        //   done()
        // })
      } else {
        return
      }
    },
    refreshAA(done) {
      console.log('down');
//      this.offsetL = 1
//      postRanksB(this.postDataA, this.offsetL)
//      .then((response) => {
//        done()
//         console.log('data', response.data)
//        this.rankListL = response.data
//      })
    },
    rankChoose(a) {
      this.rankA = a
      this.offset = 1
      this.offsetL = 1
      // this.rankListA = [];
      // this.rankListB = [];
      // this.rankList = [];
      // this.rankListL = [];
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #ffffff;
}
// 导航
.nav-pc {
  margin-right: 5rem;
  a {
    text-decoration:none;
  }
  a:hover {
    color: #ed1d24;
  }
  // a:visited {
  //   color: #2c3e50;
  // }
}
.nav {
    .logo-pc {
      padding-left: 5rem;
      display: flex;;
      span{
        flex: 1;
      }
    }
    background-color: white;
    margin: 2rem 8rem;
    // padding-left: 1rem;
    img {
        height: 4rem;
    }
    .h5-logo {
      img {
        height: 5rem;
      }
    }
}
.ranks {
    // border: 1px;
    // border-color: #E6E6E6;
    // border-style: solid;
  .ranks-title{
    text-align: center;
    height: 4rem;
    line-height: 4rem;
  }
}
.rankA {
  margin: 1rem 0;
  display: flex;
  text-align:left;
  height: 4rem;
  line-height: 4rem;
  .r {
    margin-left: 10px;
    width: 30px;
  }
  .flex {
    flex: 1;
  }
  img {
    margin-right: 1rem;
    height:4rem;
    border-radius:50%;
  }
}
.rankB {
  margin: 2rem 0;
  display: flex;
  text-align:left;
  height: 4rem;
  line-height: 4rem;
  .r {
    margin-left: 10px;
    width: 30px;
  }
  .flex {
    flex: 1;
  }
  img {
    margin-right: 1rem;
    height:4rem;
    border-radius:50%;
  }
}
// scroll-x
.scroll-x {
  margin: 0 auto;
  width: 25rem;
  -webkit-overflow-x: scroll;
  overflow-x: scroll;/*水平方向，超出部分添加滚动机制*/
  .active {
    color: rgb(237, 29, 36);
  }
  ul {
    display: flex;
    li {
      flex: 1;
      white-space:nowrap; //不换行
      margin: 2rem;
      // color: red;
    }
  }
  span {
    width: 500px;
  }
}
</style>
